let Component = createComponent$((props$: Observable<SomeProps>) => {
  // this function initialises component and is called only once
  // so it's a good place to declare callbacks
  let onClick = () => alert('Wow! Clicked!');

  // or use hooks
  let contextData$: Observable<any> = useHook$(() => {
    // call one or many hooks here
    return useContext(SOME_CONTEXT);
  });

  // and we return either JSX or a stream of JSX (Observable<JSX>)
  return <div>
    <$>{
      // and we can still use <$> elements to display dynamic data
      props$.pipe(map(p => p.id))
    }</$>
    <button onClick={ onClick }>click me</button>
  </div>
})

import { switchMap } from 'rxjs/operators';
import { useParams } from 'react-router-dom';
import { $, createComponent$, useHook$ } from 'react-rxjs-elements';

// create a component for route /page/:id
export default createComponent$(() => {
  // get route params as a stream
  let params$ = useHook$(useParams);

  // map it to data fetching from some web API
  let data$ = params$.pipe(
    switchMap(p => fetch('/api/' + p.id))
  );

  // here we can either return a stream of JSX
  return data$.pipe(map(d => <h1>{ d.title }</h1>));
  // or display our data in a $ element
  return <$h1>{ data$.pipe(map(d => <h1>{ d.title })) }</$h1>
})